import { defineStore } from 'pinia'

// Todo 类型注解
export type Todo = {
  id: number;
  content: string;
  completed: boolean;
};

// Status 类型注解
export type Status = 'all' | 'active' | 'completed';

// 定义仓库
const todosStore = defineStore('todos', {
  // 状态
  state: () => {
    return {
      list: JSON.parse(localStorage.getItem('todos-list') || '[]') as Todo[],
      status: localStorage.getItem('todos-status') || 'all' as Status
    }
  },
  // 计算
  getters: {
    // 未完成列表
    activeList (state): Todo[] {
      return state.list.filter((todo) => !todo.completed)
    },
    // 已完成列表
    completedList (state): Todo[] {
      return state.list.filter((todo) => todo.completed)
    },
    // 计算显示列表(全部显示/未完成/已完成) showList
    showList (): Todo[] {
      if (this.status === 'active') {
        // 调用其他 getter 方法 ✨
        return this.activeList
      } else if (this.status === 'completed') {
        return this.completedList
      } else {
        return this.list
      }
    },
    leftCount (): number {
      return this.list.filter((v) => !v.completed).length
    },
    // 计算全选状态
    isAllDone (): boolean {
      return this.list.length !== 0 && this.list.every((v) => v.completed)
    }
  },
  // 操作
  actions: {
    // 根据 id 删除数据
    delById (id: number) {
      // toRefs 失效，因为内存地址被覆盖了
      this.list = this.list.filter((v) => v.id !== id)
    },
    // 根据 id 更新完成状态 changeDone
    changeDone (id: number) {
      const index = this.list.findIndex((v) => v.id === id)
      this.list[index].completed = !this.list[index].completed
    },
    // 删除已完成任务
    clearDone () {
      // toRefs 失效，因为内存地址被覆盖了
      this.list = this.list.filter((v) => !v.completed)
    },
    // 切换全选状态
    changeAllDone (checked: boolean) {
      // toRefs 失效，因为内存地址被覆盖了
      this.list = this.list.map((item) => ({ ...item, completed: checked }))
    },
    // 新增待办任务
    addTodo (todo: Todo) {
      this.list.unshift(todo)
    },
    // 高亮切换效果
    changeStatus (status: Status) {
      this.status = status
    }
  }
})

// 导出默认仓库
export default todosStore
/**
 *  学习目标：Todos 案例
 *    1. 拆分组件(头部，主体，底部)
 *    2. 初始化列表数据，并渲染到主体组件中
 *    3. 主体 - 根据 id 删除数据 delById
 *    4. 主体 - 根据 id 更新完成状态 changeDone
 *    5. 底部 - 删除已完成任务 clearDone
 *    6. 底部 - 计算剩余任务数量 leftCount
 *    7. 底部 - 高亮切换效果 changeStatus
 *    8. 主体 - 计算显示列表(全部显示/未完成/已完成) showList
 *    9. 主体 - 计算全选状态，切换全选状态 isAllDone changeAllDone
 *    10. 头部 - 获取输入框数据，按回车键，新增待办任务 addTodo
 *    11. 数据初始化时 - 获取本地存储数据
 *    12. 数据被更新时 - 设置本地存储数据
 */
